<template>
  <form method="POST" action="http://localhost:8080/upload" enctype="multipart/form-data">
    <div class="imgaa">
      <img src="../assets/1.png">
    </div>
    <div class="">
      <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
      <span class="bit" >注册</span>
      <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
      <div class="adc">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="昵称" aria-label="Username" v-model="user.username" required @input="request.get('/user/check_name_if_used',{username:user.username}).then(re=>{nameused=re})">
        </div>
        <span class="text-danger" v-if="nameused">该用户名已被使用</span>
        <div class="input-group mb-3 cvb">
          <input type="password" class="form-control" placeholder="密码(6到16个字符组成，区分大小写)" aria-label="Password" v-model="user.password" required>
        </div>
        <div class="input-group mb-3 cvb">
          <input type="email" class="form-control" placeholder="email" aria-label="Email" v-model="user.email" required @input="request.get('/user/check_email_if_used',{email:user.email}).then(re=>{emailused=re})">
        </div>
        <span class="text-danger" v-if="emailused">该邮箱已被注册</span>
        <div class="input-group mb-3 cvb" v-if="false">
          <input type="text" class="form-control" placeholder="请输入邮箱验证码">
          <button class="btn btn-outline-secondary" type="button" id="button-addon2">点击获取</button>
        </div>
        <div class="cvb">
          <button type="button" class="btn btn-lg btn-primary" style="width: 100%" :disabled="!ready"><a href="javascript:" @click="register">注册</a></button>
        </div>
      </div>
    </div>
  </form>
</template>

<script setup lang="ts">
import request from "@/hooks/request";
import Home from "@/components/Home.vue"
import {computed, inject, ref} from "vue";
const changeComponent = inject('changeComponent')
const uuid=inject("uuid")
const user={
  username:'',
  password:'',
  info:'',
  email:''
}
const  register=function (){
  if (!document.forms[1].reportValidity()){

    return;
  }
  request.post('user/register_f',user).then(
      re=>{
        if (re.obj){
          uuid.value=re.obj.uuid
          changeComponent(Home)
        }
      }
  )
  return
}
const nameused=ref(false)
const emailused=ref(false)
const ready=computed(()=>!nameused.value&&!emailused.value)
</script>
<style scoped>
.imgaa{
  margin-left:20%;
}
.bit{
  font-size: 38px;
  font-weight: bold;
  margin-left: 45%;
  margin-top: 500px;
}
.adc{
  padding-top: 50px;
  margin-left: 35%;
  margin-right: 40%;
}
.cvb{
  padding-top: 30px;
}
a{ text-decoration:none;
  color:white;
}
a:link {
  color:#3C3C3C;
  text-decoration:none;
}

a:hover {
  color:#FF00FF;
  text-decoration:none;
}
a:active {
  color:#D200D2;
  text-decoration:none;
}

</style>